<script setup>
import { ref } from "vue";

const items = ref([1, 2, 3, 4, 5])

const count = ref(items.value.length)

console.log(items.value, count.value)
// [n,m]
const getRandomPos = (n, m) => {
  return Math.floor(Math.random() * (m - n))
}

const add = () => {
  let position = getRandomPos(0, items.value.length)
  count.value++
  items.value.splice(position, 0, count.value)
}

const remove = () => {
  let position = getRandomPos(0, items.value.length)
  items.value.splice(position, 1)
}

const sort = () => {
  items.value.sort((a, b) => {
    return a - b
  })
}
</script>

<template>
  <div>
    <h3>进入/离开动画</h3>
    <div>
      <button @click="add">在任意位置添加一项</button>
      <button @click="remove">在任意位置删除一项</button>
      <button @click="sort">重新排序</button>
    </div>
    <TransitionGroup name="list" tag="ul">
      <li v-for="item in items" :key="item">
        {{ item }}
      </li>
    </TransitionGroup>
    <!-- 上面的示例有一些明显的缺陷：当某一项被插入或移除时，它周围的元素会立即发生“跳跃”而不是平稳地移动。 -->
  </div>
</template>

<style scoped>
/* 添加一些额外的 CSS 规则来解决这个问题 */
.list-move, /* 对移动中的元素应用的过渡 */
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}
.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/* 确保将离开的元素从布局流中删除
  以便能够正确地计算移动的动画。 */
.list-leave-active {
  position: absolute;
}
</style>>
  